<template>
  <div>
    <h1>计算属性</h1>
    姓：<input type="text" v-model="person.firstName">
    名：<input type="text" v-model="person.lastName">
    <p>全名：{{fullName}}</p>
    名：<input type="text" v-model="fullName">
  </div>

</template>

<script>

  import { reactive,computed  } from 'vue'


export default {
  name: "demo02.vue",
  setup(){
    let person = reactive({
      firstName: '张',
      lastName:'三'
    })

    // let fullName = computed(()=>{
    //   return person.firstName+"-"+person.lastName
    // })

    let fullName = computed({
      // getter
      get() {
        return person.firstName + ' ' + person.lastName
      },
      // setter
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [person.firstName, person.lastName] = newValue.split(' ')
      }
    })


    return {
      person,
      fullName
    }
  }
}
</script>

<style scoped>

</style>